'use strict';

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Text,
    TouchableOpacity
} from 'react-native';

import PropTypes from "prop-types";
import enLocale from './locale/en_US';
import zhLocale from './locale/zh_CN';

import Label from  '../label/index';
import Color from '../../config/theme/standard/color';
import FontSize from '../../config/theme/standard/fonts'

export default class Pagination extends Component {

    constructor(props) {
        super(props);
        this.locale = this.props.locale == "en" ? enLocale : zhLocale;
        this.prevText = this.props.prevText?this.props.prevText:this.locale.prevText;
        this.nextText = this.props.nextText?this.props.nextText:this.locale.nextText;
        this.state = {
            prevPropsCurrent:props.current,
            current: props.current,
        };
    }
    
    static getDerivedStateFromProps(nextProps, prevState) {
        if (('current' in nextProps) && (nextProps.current !== prevState.prevPropsCurrent)) {
            return {
                prevPropsCurrent: nextProps.current,
                current: nextProps.current
            };
        }
        return null;
    }

    onChange(p) {
        this.setState({
            current: p,
        });
        if (this.props.onChange) {
            this.props.onChange(p);
        }
    }

    render() {
        const { style, total, simple, size } = this.props;
        const { current } = this.state;
        const simpleItem = simple ? (
            <View style={[styles.numberStyle]}>
                <Label text={current+'/'+total} labelStyle={{color:Color.pagination.number,fontSize:FontSize.pagination.numberFontSize}}/>
            </View>
        ) : <View style={[styles.numberStyle]}/>;
        let markup = (
            <View style={styles.pagination}>
                <TouchableOpacity
                    style={[styles.button,{borderColor: current <= 1 ?  Color.pagination.buttonDisable: Color.pagination.buttonBorder, width: size == 'small' ? 58 : 80, height: size == 'small' ? 24: 30,backgroundColor:current <= 1 ?Color.pagination.buttonDisable : Color.pagination.buttonBackground}]}
                    activeOpacity={0.7}
                        disabled={current <= 1}
                        onPress={() => this.onChange(current - 1)}
                >
                    <Label text={this.prevText} labelStyle={{color:current <= 1 ? Color.pagination.textDisable: Color.pagination.text,fontSize:size == 'small'?FontSize.pagination.textSmallFontSize:FontSize.pagination.textFontSize}}/>
                </TouchableOpacity>
                {simpleItem}
                <TouchableOpacity
                    style={[styles.button,{borderColor: current>= total?Color.pagination.buttonDisable : Color.pagination.buttonBorder, width: size == 'small' ? 58 : 80, height: size == 'small' ? 24: 30,backgroundColor: current>= total ?Color.pagination.buttonDisable : Color.pagination.buttonBackground}]}
                    activeOpacity={0.7}
                        disabled={current >= total}
                        onPress={() => this.onChange(current + 1)}
                >
                    <Label text={this.nextText} labelStyle={{color:current>= total ? Color.pagination.textDisable: Color.pagination.text,fontSize:size == 'small'?FontSize.pagination.textSmallFontSize:FontSize.pagination.textFontSize}}/>
                </TouchableOpacity>
            </View>
        );

        return (
            <View style={[styles.container, style]}>
                {markup}
            </View>
        );
    }
}

Pagination.propTypes = {
    simple : PropTypes.bool,
    style : PropTypes.object,
    size : PropTypes.oneOf(['normal', 'small']),
    current: PropTypes.number,
    total : PropTypes.number,
    prevText : PropTypes.string,
    nextText : PropTypes.string,
    onChange : PropTypes.func,
    locale : PropTypes.string,
};

Pagination.defaultProps = {
    current: 1,
    total: 5,
    simple: true,
    prevText: '上一页',
    nextText: '下一页',
    onChange: () => {},
    locale: 'en'
};


const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    pagination:{
        width:'100%',
        flexDirection: 'row',
    },
    numberStyle: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: 125
    },
    button:{
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: 80,
        height: 30,
        borderRadius: 2,
        borderWidth: 1,
    }
});
